<template>
  <div class="box-content">
    <div class="box-content-header">
      <p>
        能耗统计
      </p>
    </div>
    <div class="box-content-body">
      <div class="l">
        <div class="line-grid">
          <div class="icon-img">
            <div class="img">
              <svg-icon icon-class='jinridianliang' />
            </div>
          </div>
          <span>今日电量</span>
          <p>{{todayEnergy.value}}<span>{{todayEnergy.unit}}</span></p>
        </div>
        <div class="line-grid">
          <div class="icon-img">
            <div class="img">
              <svg-icon icon-class='yuebaobiao' />
            </div>
          </div>
          <span>本月电量</span>
          <p>{{cMonthEnergy.value}}<span>{{cMonthEnergy.unit}}</span></p>
        </div>
        <div class="line-grid">
          <div class="icon-img">
            <div class="img">
              <svg-icon icon-class='zuoridianliang' />
            </div>
          </div>
          <span>昨日电量</span>
          <p>{{yesTerdayEnergy.value}}<span>{{yesTerdayEnergy.unit}}</span></p>
        </div>
        <div class="line-grid">
          <div class="icon-img">
            <div class="img">
              <svg-icon icon-class='shangyuetongqi' />
            </div>
          </div>
          <span>上月同期</span>
          <p>{{lMonthEnergy.value}}<span>{{lMonthEnergy.unit}}</span></p>
        </div>
      </div>
      <div class="r">
        <div class="w1 h1"
          ref="jinridianliangtongbi"></div>
      </div>
    </div>
  </div>
</template>


<script>
import 'echarts-liquidfill'
import { getIndexEnergyConsumption } from '@/api'
let resize = null

export default {
  props: {
    companyId: {
      type: String,
      default: ''
    }
  },
  watch: {
    companyId() {
      this.init()
    }
  },
  data: () => ({
    todayEnergy: { value: 0, unit: 'kw.h' },
    cMonthEnergy: { value: 0, unit: 'kw.h' },
    yesTerdayEnergy: { value: 0, unit: 'kw.h' },
    lMonthEnergy: { value: 0, unit: 'kw.h' }
  }),
  mounted() {
    this.init()
  },
  beforeDestroy() {
    if (resize) {
      window.removeEventListener('resize', resize)
    }
  },
  methods: {
    async init() {
      const vm = this
      const companyId = vm.companyId
      if (!companyId) {
        return
      }
      const params = { companyId }
      const { code, data } = await getIndexEnergyConsumption(params)
      if (code !== 200) return
      const {
        cMonthEnergy,
        lMonthEnergy,
        todayEnergy,
        yesTerdayEnergy,
        recentRate
      } = data
      vm.cMonthEnergy = cMonthEnergy
      vm.lMonthEnergy = lMonthEnergy
      vm.todayEnergy = todayEnergy
      vm.yesTerdayEnergy = yesTerdayEnergy
      vm.initChart(recentRate)
    },
    initChart(percent = 80) {
      const e = document.body.clientWidth
      const fontSize = (e / 1082) * 9
      const vm = this
      const echarts = vm.echarts
      const option = {
        title: {
          text: '本月电量同比',
          bottom: 10,
          textStyle: {
            color: '#fff'
          },
          left: 'center'
        },
        series: [
          {
            name: '今日电量同比',
            type: 'liquidFill',
            center: ['50%', '40%'],
            radius: '70%',
            amplitude: '8%',
            waveLength: '80%',
            data: [percent],
            color: 'rgba(67,209,100,1)',
            label: {
              normal: {
                color: 'red',
                insideColor: 'transparent',
                textStyle: {
                  fontSize: 18,
                  fontWeight: 'bold'
                }
              }
            },
            outline: {
              show: true,
              borderDistance: 0,
              itemStyle: {
                borderColor: '#6CD61E',
                borderWidth: 7
              }
            },
            backgroundStyle: {
              borderColor: '#BEFC6B',
              borderWidth: 4,
              color: 'rgba(67,209,100,.3)'
            }
          }
        ]
      }
      vm.$nextTick(() => {
        const dom = vm.$refs.jinridianliangtongbi
        const chart = echarts.init(dom)
        chart.setOption(option)
        resize = () => chart.resize()
        window.addEventListener('resize', resize)
      })
    }
  }
}
</script>
